<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>查看标注图片</title>
    <link rel="stylesheet" href="{{ url_for('static',filename='layui/css/layui.css') }}">
    <style>
        .show-img {
            height: auto;
            width: 100%;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="layui-container">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>{{ image.patient.name }}</legend>
    </fieldset>

    <div class="layui-bg-gray">
        <div class="layui-row layui-col-space15">
            {#  单图为俩卡片  #}
            {% if image.type == 1 %}
                <div class="layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header">原始图像</div>
                        <div class="layui-card-body">
                            <img alt="" src="{{ url_for('static',filename=image.pre_address_1) }}" class="show-img">
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header">标注后图像</div>
                        <div class="layui-card-body">
                            <img alt="" src="{{ url_for('static',filename=image.post_address) }}" class="show-img">
                        </div>
                    </div>
                </div>
            {% else %}
                {#  多图为仨卡片  #}
                <div class="layui-col-md4">
                    <div class="layui-card">
                        <div class="layui-card-header">原始低分辨率图像</div>
                        <div class="layui-card-body">
                            <img alt="" src="{{ url_for('static',filename=image.pre_address_1) }}" class="show-img">
                        </div>
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="layui-card">
                        <div class="layui-card-header">原始高分辨率图像</div>
                        <div class="layui-card-body">
                            <img alt="" src="{{ url_for('static',filename=image.pre_address_2) }}" class="show-img">
                        </div>
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="layui-card">
                        <div class="layui-card-header">标注后图像</div>
                        <div class="layui-card-body">
                            <img alt="" src="{{ url_for('static',filename=image.post_address) }}" class="show-img">
                        </div>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
</div>
<script src="{{ url_for('static',filename='layui/layui.js') }}"></script>
<script>
    //JS
    layui.use('layer', function () {
        let layer = layui.layer
            , $ = layui.jquery;
        {#layer.msg('点击图片查看原图')#}
        $('img').click(function () {
            open(this.src)
        })
    })
</script>
</body>
</html>